<template>
    <view class="page pos-rel" v-if="info">
        <view class="top over-hide "></view>
        <view class="content over-hide pos-abs">
            <view class="container">
                <view class="bac-color-fff info mar-t-20">
                    <view class="flex align-center">
                        <view class="tag">

                        </view>
                        <view class="font-size-20 mar-l-10 font-bold flex-1">
                            志愿者信息
                        </view>
                    </view>
                    <view class="info-content" >
                            <view class="mar-t-10 flex font-color-888 align-center">
                                <view class="title font-size-15">
                                    姓名
                                </view>
                                <view>：</view>
                                <view class="flex-1 mar-l-10 font-size-16"> 
                                    {{info.pubapply.apply_username}}
                                </view>
                            </view> 
                            <view class="mar-t-10 flex font-color-888 align-center">
                                <view class="title font-size-15">
                                    手机号码
                                </view>
                                <view>：</view>
                                <view class="flex-1 mar-l-10 font-size-16"> 
                                    {{info.pubapply.mobile}}
                                </view>
                            </view> 
							<view class="mar-t-10 flex font-color-888 align-center">
								<view class="title font-size-15">
									帮扶类型
								</view>
								<view>：</view>
								<view class="flex-1 mar-l-10 font-size-16"> 
									{{info.pubapply.type_name}}
								</view>
							</view> 
                        <transition name="fade">
                            <view  v-if="show">
                                <view class="mar-t-10 flex font-color-888 align-center">
                                    <view class="title font-size-15">
                                        身份证号
                                    </view>
                                    <view>：</view>
                                    <view class="flex-1 mar-l-10 font-size-16"> 
                                        {{info.pubapply.card_num}}
                                    </view>
                                </view> 
                            </view>
                        </transition>
                        <view class="font-color-bf text-center font-size-14 mar-t-20 flex align-center justify-center" @click="show = !show"> 
                            <text v-show="!show">展开</text>
                            <text v-show="show">返回</text>
                            <image src="@/static/icons/down.png" style="width:25px;height:25px" />
                        </view>
                    </view>
                </view>

                <view class="bac-color-fff info mar-t-20">
                    <view class="flex align-center">
                        <view class="tag">

                        </view>
                        <view class="font-size-20 mar-l-10 font-bold flex-1">
                            本次帮扶内容
                        </view>
                    </view>
                    <view class="day-card">
                        <view  v-if="log_info" class=" pad-b-20">
                             <view class="mar-t-20 mar-l-10 font-size-16">
                                第{{log_info.help_num}}次打卡
                            </view>
                            <view class="flex pad-b-20 pad-l-10">
                                <view class="flex-1">
                                    <view class=" font-color-888 font-size-14">
                                        {{log_info.help_info}}
                                    </view>
                                    <view class="flex mar-t-10" v-if="log_info.help_images" >
                                        <image :src="url" mode="" class="mar-r-10 day-card-image" v-for="(url,i) in log_info.help_images" :key="i" @click="prviewImage(log_info.help_images,i)" />
                                    </view>
                                    <view class="font-color-888 font-size-13 mar-t-10">
                                        打卡时间：{{log_info.create_time_text}}
                                    </view>
                                    <view class="font-color-888 font-size-13 mar-t-10 flex align-center" v-if="log_info.help_address">
                                    	打卡地址：{{ log_info.help_address }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="bac-color-fff info mar-t-20" v-if="log_info.evaulate">
                    <view class="flex align-center">
                        <view class="tag">

                        </view>
                        <view class="font-size-22 mar-l-10 font-bold flex-1">
                            评价内容
                        </view>
                    </view>
                    <view class="day-card">
                        <view class="pad-b-20">
                            <view class="bac-color-f4 mar-t-10 pj-card">
                               <!-- <view class="font-color-888 mar-t-5 flex">
                                    <view class="title">综合得分:</view>
                                    <htz-rate :value="parseInt(log_info.evaulate.score_info.zhpf) " class="mar-l-5" :readonly="true"></htz-rate>
                                </view> -->
                                 <view class="font-color-888 mar-t-5 flex">
                                    <view class="title">服务态度:</view>
                                    <htz-rate :value="parseInt(log_info.evaulate.score_info.fwtd)" class="mar-l-5"  :readonly="true"></htz-rate>
                                </view>
                                <view class="font-color-888 mar-t-5 flex">
                                    <view class="title">服务内容:</view>
                                    <htz-rate :value="parseInt(log_info.evaulate.score_info.nx)" class="mar-l-5"  :readonly="true"></htz-rate>
                                </view>
                                  <view class="font-color-888 mar-t-5 flex">
                                    <view class="title">服务效果:</view>
                                    <htz-rate :value="parseInt(log_info.evaulate.score_info.qhd)" class="mar-l-5"  :readonly="true"></htz-rate>
                                </view>
                            </view>
                            
                        </view>
                    </view>
					<view class="font-size-14 font-color-666">
						{{log_info.evaulate.remark}}
					</view>
                </view>
              
                <view style="height:40px"></view>
            </view>
           
        </view>
    </view>
</template>

<script>
import {myHelpdetail,helpLogDetail,} from '@/utils/http'
import htzRate from '@/components/htz-rate'
export default {
    data() {
        return {
            show:false,
            id:'',
            order_no:'',
            info:'',
            log_info:'',
        }
    },
    components: {
		htzRate
	},
    methods: {
        slidedown() {
            // 同时右平移到 100px,旋转 360 读
            this.$refs.ani.step({
                translateX: '100px',
                rotate: '360'
            })
            // 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
            this.$refs.ani.step({
                translateX: '0px',
                rotate: '0'
            },
            {
                timingFunction: 'ease-in',
                duration: 200
            })
            // 开始执行动画
            this.$refs.ani.run(()=>{
                console.log('动画支持完毕')
            })
        },
        myHelpdetail(){
            myHelpdetail({id:this.id}).then(res=>{
                console.log(res);
                if(res){
                    this.info = res
                }
                
            })
        },
        helpLogDetail(){
            helpLogDetail({order_no: this.order_no}).then(res=>{
                if(res){
					this.log_info = res
				}
            })
        },
        prviewImage(urls, index) {
            uni.previewImage({
                urls: urls,
                current: index,
            });
        },
    },
    onLoad(option) {
        this.id = option.id
        this.order_no = option.order_no
        this.myHelpdetail();
        this.helpLogDetail();
    },
}
</script>

<style scoped>
page{
    background-color: #F4F5FA !important;
}
.top{
    top: 0;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(to right,#9CECFB, #65C7F7 , #0052D4);
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px
}
.content{
    top: 10px;
    width: 100%;
    height: 100%;
}
.content .info{
    min-height: 200px;
    border-radius: 8px;
    padding: 10px;
}
.content .info .tag{
    width: 10rpx;
    height: 38rpx;
    background-color: #FF5C00;
    border-radius: 16rpx;
}
.content .info .unlink{
    background-color: #00CE9E;
    padding: 5px 10px;
    border-radius: 8px;
}
.info-content{
    padding: 5px 10px 0 10px;
}
.info-content .title{
    min-width: 90px;
    text-align:justify;
    text-align-last: justify;
}
.day-card .day-card-image{
    height: 80px;
    width: 80px;
    background-color: #ccc;
}
.play-day-card{
    height: 50px;
    line-height: 50px;
    width: 50px;
    text-align: center;
    color: #fff;
    background-color: #0088FF;
    border-radius: 50%;
    box-shadow: 0px 0px 5px 3px rgb(230, 227, 227);
}

.help-lag {
    padding: 10px 15px;
    border-radius: 5px;
}
.tag-lag{
    background-color: #0088FF;
    width: 4px;
    height: 20px;
    border-radius: 5px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.pinjia-btn{
    background-color: #f2af3c;
    color: #fff;
    height: 35px;
    line-height: 35px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
    border-radius: 8px;
}
.pj-card{
    padding:8px 12px;
    border-radius: 8px;
}
.pj-card .avatar{
    height: 35px;
    width: 35px;
    background: #fff;
    border-radius: 50%;
}
.pj-card .title{
    min-width: 110px;
    text-align: justify;
    text-align-last: justify;
}
</style>